<template>
  <div class="page">
    <div class="box" @click="setScaleCenter" :style="scale.style?.value" @mousedown="onStart" @mousemove="onMove" @mouseup="onEnd">
      {{ 1 + 1 }}
    </div>
  </div>
  <div class="page">
    <div class="box box1" :style="scale.style?.value">
      {{ 1 + 1 }}
    </div>
  </div>
  <div>
    <button @click="add">添加</button>
    <button @click="large">放大</button>
    <button @click="small">缩小</button>
    <button @click="up">往上</button>
    <button @click="down">往下</button>
    <button @click="rotate">旋转</button>
    <button @click="tempStart">入栈保存</button>
    <button @click="tempReset">出栈还原</button>
  </div>
</template>
<script>
import Scale from './class/Scale.class.js'
import '@/libs/jquery-ui-1.14.1.custom.draggable/jquery-ui.min.js'
import '@/libs/fix-draggable-touch.js'
import { markRaw } from 'vue'
export default {
  data() {
    return {
      scale: {}
    }
  },
  methods: {
    tempStart() {
      this.scale.save()
    },
    tempReset() {
      this.scale.withdraw()
    },
    add() {
      console.log(`helloworld`)
    },
    up() {
      this.scale.up()
    },
    down() {
      this.scale.down()
    },
    rotate() {
      this.scale.rotate()
    },
    setScaleCenter(e) {
      let { box } = this
      let scaleCenter = [e.x, e.y]
      this.box.scaleCenter = scaleCenter
      this.box.nowMat = this.scale.nowMat.value
      this.scale.set(this.box)
    },
    large() {
      this.scale.large()
    },
    small() {
      this.scale.small()
    },
    onStart(e) {
      console.log(`开始`, e)
      e = e.touches ? e.touches[0] : e
      this.st = [e.clientX, e.clientY]
      this.isStart = true
    },
    onMove(e) {
      if (this.isStart) {
        e = e.touches ? e.touches[0] : e
        console.log(`移动`, e)
        let [ox, oy] = this.st
        let distance = [e.clientX - ox, e.clientY - oy]
        this.scale.move(distance)
        this.st = [e.clientX, e.clientY]
      }
    },
    onEnd(e) {
      this.isStart = false
      console.log(`结束`, e)
      //e.preventDefault()
      //return false
    }
  },
  mounted() {
    let offset = $('.box').offset()
    let box = {
      width: $('.box').width(),
      height: $('.box').height(),
      left: offset.left,
      top: offset.top
    }
    box.center = [box.width / 2 + offset.left, box.height / 2 + offset.top]
    box.scaleCenter = Object.assign([], box.center)

    this.box = box
    this.scale = markRaw(new Scale(this.box))
    console.log(this.scale)

    $('.box1').draggable({
      start: function(e) {
        console.log(e, '开始')
      },
      drag: function(e) {
        console.log(e, '移动')
      },
      stop: function(e) {
        console.log(e, '结束')
      }
    })
  },
  unmounted() {}
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background: url('../../images/p1.png') 0 0 / 100% 100% no-repeat;
}
.page {
  padding: 100px;
  display: flex;
  justify-content: center;
}
</style>
